<template>
  <div class="app-container">
    管理员姓名： <el-input style="width: 200px"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="adminName">
      </el-input>
      管理员账号： <el-input style="width: 200px"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="adminAccount">
      </el-input>
      管辖区： <el-select v-model="areaId"
                 slot="prepend"
                 clearable
                 @change="getStreetList(areaId)"
                 placeholder="请选择区">
        <el-option v-for="item in regionList"
                   :key="item.areaId"
                   :label="item.areaName"
                   :value="item.areaId">
        </el-option>
      </el-select>
      管辖街道： <el-select v-model="streetId"
                 slot="prepend"
                 clearable
                 @change="getCommunityList(streetId)"
                 placeholder="请选择街道">
        <el-option v-for="item in streetList"
                   :key="item.areaId"
                   :label="item.areaName"
                   :value="item.areaId"></el-option>
      </el-select>
      管辖小区： <el-select v-model="communityId"
                 slot="prepend"
                 clearable
                 placeholder="请选择小区">
        <el-option v-for="item in communityList"
                   :key="item.areaId"
                   :label="item.areaName"
                   :value="item.areaId"></el-option>
      </el-select>
    <el-row style="margin:10px">注册时间： <el-date-picker v-model="begin"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
      </el-date-picker>
      - <el-date-picker v-model="end"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
      </el-date-picker>
    <el-button type="primary"
               style="margin: 20px"
               @click="selectCommunityTypist()">搜索</el-button>
    <el-button type="primary"
               style="margin: 20px"
               @click="resetForm()">重置</el-button>
    <el-button type="primary"
               @click="dialogFormVisible = true">添加</el-button>
    </el-row>
    <el-table v-loading="listLoading"
              :data="list"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row>
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column align="center"
                       label="ID"
                       width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="管辖小区"
                       width=auto>
        <template slot-scope="scope">
          {{ scope.row.areaList[0].areaName }}
        </template>
      </el-table-column>
      <el-table-column label="管理员姓名"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系方式"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.userPhone }}
        </template>
      </el-table-column>
      <el-table-column label="管理员账号"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.account }}
        </template>
      </el-table-column>
      <el-table-column label="密码"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.userPassword }}
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="created_at"
                       label="注册时间"
                       width=auto>
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ new Date(scope.row.registerDate).toLocaleDateString() }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col"
                       label="操作"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          <el-button type="success"
                     plain
                     @click="editor(scope.row)">编辑</el-button>
          <el-button type="danger"
                     plain
                     @click="deletecommunityTypist(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加小区录入员"
               :visible.sync="dialogFormVisible">
      <el-form :model="communityTypist">
        <el-form-item label="管理员姓名"
                      :label-width="formLabelWidth">
          <el-input v-model="communityTypist.userName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管辖区"
                      :label-width="formLabelWidth">
          <el-select v-model="areaId1"
                     @change="getStreetList(areaId1)"
                     placeholder="请选择区">
            <el-option v-for="item in regionList"
                       :key="item.areaId"
                       :label="item.areaName"
                       :value="item.areaId"></el-option>
          </el-select>
          <el-select style="margin:auto 20px"
                     v-model="streetId1"
                     @change="getCommunityList(streetId1)"
                     placeholder="请选择街道">
            <el-option v-for="item in streetList"
                       :key="item.areaId"
                       :label="item.areaName"
                       :value="item.areaId"></el-option>
          </el-select>
          <el-select v-model="communityId1"
                     placeholder="请选择小区">
            <el-option v-for="item in communityList"
                       :key="item.areaId"
                       :label="item.areaName"
                       :value="item.areaId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式"
                      :label-width="formLabelWidth">
          <el-input v-model="communityTypist.userPhone"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理员账号"
                      :label-width="formLabelWidth">
          <el-input v-model="communityTypist.account"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      :label-width="formLabelWidth">
          <el-input v-model="communityTypist.userPassword"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addCommunityTypist()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改小区录入员信息"
               :visible.sync="dialogForm1Visible">
      <el-form :model="communityTypist1">
        <el-form-item label="管理员姓名"
                      :label-width="form1LabelWidth">
          <el-input v-model="communityTypist1.userName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管辖区"
                      :label-width="form1LabelWidth">
          <el-select v-model="areaId2"
                     @change="getStreetList(areaId2)"
                     placeholder="请选择区">
            <el-option v-for="item in regionList"
                       :key="item.areaId"
                       :label="item.areaName"
                       :value="item.areaId"></el-option>
          </el-select>
          <el-select style="margin:auto 20px"
                     v-model="streetId2"
                     @change="getCommunityList(streetId2)"
                     placeholder="请选择街道">
            <el-option v-for="item in streetList"
                       :key="item.areaId"
                       :label="item.areaName"
                       :value="item.areaId"></el-option>
          </el-select>
          <el-select v-model="communityId2"
                     placeholder="请选择小区">
            <el-option v-for="item in communityList"
                       :key="item.areaId"
                       :label="item.areaName"
                       :value="item.areaId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式"
                      :label-width="form1LabelWidth">
          <el-input v-model="communityTypist1.userPhone"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理员账号"
                      :label-width="form1LabelWidth">
          <el-input v-model="communityTypist1.account"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      :label-width="form1LabelWidth">
          <el-input v-model="communityTypist1.userPassword"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogForm1Visible = false">取 消</el-button>
        <el-button type="primary"
                   @click="updateCommunityAdmin()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页插件 -->
    <div class="block"
         style="float:right">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pageIndex"
                     :page-sizes="pageSizes"
                     :page-size.sync="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="Total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { addRegionCheck, getRegionCheck, updateRegionCheck, deleteAdmin } from '@/api/regionAdmin/regionCheck'
import { getRegionList } from '@/api/regionAdmin/region'
import { showParent } from '@/api/regionAdmin/streetCheck'

export default {
  filters: {
    statusFilter (status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data () {
    return {
      list: null,
      listLoading: true,
      adminName: null,
      adminAccount: null,
      areaId: "",
      areaId1: "",
      areaId2: "",
      streetId: "",
      streetId1: "",
      streetId2: "",
      communityId: null,
      communityId1: "",
      communityId2: "",
      end: null,
      begin: null,
      //分页
      currentPage: 1,
      Total: 0,
      pageIndex: 1,
      pageSize: 5,
      needPage: true,
      pageSizes: [5, 10, 15, 20],
      regionList: [],
      streetList: [],
      communityList: [],
      dialogFormVisible: false,
      dialogForm1Visible: false,
      communityTypist: {
        userId: "",
        userName: "",
        account: "",
        userPassword: "",
        userPhone: "",
        registerDate: "",
        roleId: "3",
        areaList: [],
        shelters: null,
        role: null
      },
      communityTypist1: {
        userId: "",
        userName: "",
        account: "",
        userPassword: "",
        userPhone: "",
        roleId: "3"
      },
      formLabelWidth: '120px',
      form1LabelWidth: '120px'
    }
  },
  created () {
    this.fetchData(),
    this.getRegionList()
  },
  methods: {
    fetchData () {
      this.listLoading = true
      //获取小区管理员信息
      getRegionCheck(3, this.pageIndex, this.pageSize).then(response => {
        this.list = response.obj.list
        localStorage.setItem("list", JSON.stringify(this.list))
        this.Total = response.obj.total
        this.listLoading = false
      })
    },

    //获取区信息
    getRegionList () {
      this.pageIndex = null
      this.pageSize = null
      this.needPage = false
      getRegionList(0, this.pageIndex, this.pageSize, this.needPage).then(response => {
        this.regionList = response.obj.list
        console.log(this.regionList)
        // console.log(response)
      })
      // console.log(this.regionList)
    },

    //获取街道信息
    getStreetList (parentId) {
      this.pageIndex = null
      this.pageSize = null
      this.needPage = false
      if (parentId != null) {
        getRegionList(parentId, this.pageIndex, this.pageSize, this.needPage).then(response => {
          this.streetList = response.obj.list
        })
      }
    },

    //获取小区信息
    getCommunityList (parentId) {
      this.pageIndex = null
      this.pageSize = null
      this.needPage = false
      if (parentId != null) {
        getRegionList(parentId, this.pageIndex, this.pageSize, this.needPage).then(response => {
          this.communityList = response.obj.list
        })
      }
    },

    //查询小区录入员信息
    selectCommunityTypist () {
      // this.list = JSON.parse(localStorage.getItem("list"))
      if (this.adminName == "" && this.adminAccount == "" && this.communityId == "" && this.begin == "" && this.end == "") {
        alert("查询条件不能为空！")
        getRegionCheck(3, this.pageIndex, this.pageSize).then(response => {
          this.list = response.obj.list
          this.Total = response.obj.total
          this.listLoading = false
        })
      }
      if (this.end < this.begin) {
        alert("结束时间不能小于开始时间！")
      }
      getRegionCheck(3, this.pageIndex, this.pageSize, this.adminName, this.adminAccount, this.communityId, this.begin, this.end).then(response => {
        this.list = response.obj.list
        this.Total = response.obj.total
        this.listLoading = false
      })
    },

    //添加小区录入员信息
    addCommunityTypist () {
      addRegionCheck(this.communityTypist, this.communityId1).then(response => {
        let message = response.msg
        this.$message({
          type: 'success',
          message: message
        })
        this.dialogFormVisible = false
        this.fetchData()
        this.communityTypist.userName = ""
        this.communityTypist.account = ""
        this.communityTypist.userPhone = ""
        this.communityTypist.userPassword = ""
        this.areaId1 = ""
        this.streetId1 = ""
        this.communityId1 = ""
      })
    },
    //修改小区录入员信息
    editor (item) {
      this.dialogForm1Visible = true
      //显示小区
      this.communityId2 = item.areaList[0].areaName
      this.communityTypist1 = item
      //显示街道和区
      // this.showParent()
      showParent(item.areaList[0].areaId).then(response => {
        this.streetId2 = response.obj.parentArea.areaName
        this.areaId2 = response.obj.parentArea.parentId
      })
    },
    updateCommunityAdmin () {
      // console.log(this.communityId2)
      this.areaIdList = this.communityId2
      // console.log(this.areaIdList)
      updateRegionCheck(this.communityTypist1, this.areaIdList).then(response => {
        // console.log(response)
        //  let message = response.msg
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.dialogForm1Visible = false
        this.fetchData()
      })
    },
    //删除小区录入员
    deletecommunityTypist (item) {
      console.log(item)
      deleteAdmin(item.userId).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.fetchData()
      })
    },
    //重置查询条件
    resetForm () {
      this.adminName = null
      this.adminAccount = null
      this.areaId = null
      this.streetId = null
      this.communityId = null
      this.begin = null
      this.end = null
      this.fetchData()
      // this.list = JSON.parse(localStorage.getItem("list"))
      // this.Total = this.list.length
    },
    // 分页
    // 每页显示的条数
    handleSizeChange (val) {
      // 改变每页显示的条数 
      this.pageSize = val
      // this.pageSize=val
      // 点击每页显示的条数时，显示第一页
      // this.fetchData.getRegionCheck(1,val,1)
      // 在改变每页显示的条数时，要将页码显示到第一页
      // this.pageIndex=1
      this.fetchData()
    },
    // 显示第几页
    handleCurrentChange (val) {
      // 改变默认的页数
      this.pageIndex = val
      // 切换页码时，要获取每页显示的条数
      // this.pageSize=val
      // this.pageSize = (val)*(this.pageSize)
      this.fetchData()
    }
  }
}
</script>
